App.js

import React from 'react'
import { BrowserRouter, Link, Route,Routes} from 'react-router-dom'
import Home from './books/Home'
import Product from './books/Product'
import BookDetails from './books/BookDetails'

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <h1>iBook</h1>
          <Link to="/">Home</Link>          
          <Link to="/products">Books</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home/>} />                    
          <Route path="/products/:id" element={<BookDetails />} />            
          <Route path="/products" element={<Product />} /> 
          <Route path="*" element={(
            <div>
               <h1>This Page is not found </h1>
            </div>
          )} />    
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

Home.js

import React from 'react'
const Home = () => {
  return (
    <div className="content">
      <h1>Welcome...</h1>         
      <img src="https://picsum.photos/1200/300" alt=" home page " />
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi quia molestiae voluptate in itaque quaerat fuga deleniti, eveniet sit, debitis modi harum ex! Necessitatibus optio quasi eum obcaecati eius vitae! Nisi nostrum consequatur incidunt quae dolore nulla quas odit maiores nesciunt sed, voluptate beatae cum possimus commodi asperiores reiciendis. Nulla dolorum qui pariatur repellat aliquid quos corporis natus eveniet animi. Libero ullam asperiores quas impedit suscipit a similique repellat dolorum culpa eaque!</p>
</div>
  )
}
export default Home

Product.js

import React from 'react'
import { Link } from "react-router-dom"
const Product = () => {
    const novel = [0,1,2,3];
    const business = [4,5,6,7];    
  return (
    <div>
     <div className="content">
     <h1>Book List...</h1>
      <h3>暢銷小說</h3>
      <div className="books">
        {novel.map(e => (
          <div key={e}>
            <Link to={`/products/${e}`}>
              <img src="https://picsum.photos/250/150" alt="book" />
            </Link>
          </div>
        ))}
      </div>
      <h3>商業理財</h3>
      <div className="books">
        {business.map(e => (
          <div key={e}>
            <Link to={`/products/${e}`}>
              <img src="https://picsum.photos/250/150" alt="book" />
            </Link>
          </div>
        ))}
      </div>      
    </div> 
    </div>
  )
}

export default Product

BookDetails.js

import React from 'react'
import {  useParams ,Link } from "react-router-dom"
const  BookDetails = ()=> {
  const { id } = useParams()
    return (
    <div className="content">
      <div className="product">
        <div className="image">
          <img src="https://picsum.photos/seed/picsum/520/460" alt="" />
        </div>
        <div className="details">
          <h2>Books No. {id} </h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam earum magnam eveniet saepe quaerat veniam numquam? Ipsum rem sint optio tempore rerum repudiandae hic numquam, fugiat aspernatur quis voluptas accusantium!
          Eaque, eligendi. Sequi neque quod est ex perspiciatis, voluptates nesciunt eligendi numquam at in tempora iusto exercitationem dolor. Porro adipisci corrupti totam saepe quibusdam doloribus, repudiandae distinctio fuga modi eveniet? </p>          
   </div>
        <Link to="/products">Go Back</Link>
     </div>
</div>
  )
}
export default BookDetails